<template>
  <div class="home-swiper">
    <van-swipe v-if="sliderList.length">
      <van-swipe-item v-for="(v, i) in sliderList" :key="i">
        <img :src="v.url" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang='ts'>
import { IGlobalState } from '@/store'
import { computed, defineComponent } from '@vue/runtime-core'
import { Swipe, SwipeItem } from 'vant'
import { useStore } from 'vuex'
import * as Types from '@/store/action-types'

export default defineComponent({
  components: {
    'van-swipe': Swipe,
    'van-swipe-item': SwipeItem
  },
  async setup() {
    // 页面一加载 就要获取数据
    const store = useStore<IGlobalState>()
    const sliderList = computed(() => store.state.home.sliders)
    // 计算属性需要    .value   点value
    if (sliderList.value.length === 0) {
      // 如果数据没有获取过 才获取数据
      await store.dispatch(`home/${Types.SET_SLIDER_LIST}`)
    }
    return {
      sliderList
    }
  }
})
</script>

<style lang='scss'>
.home-swiper {
  width: 100%;
  .van-swipe {
    width: 100%;
    .van-swipe__track {
      .van-swipe-item {
        height: 170px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
